<template>
  <section>
    <el-button @click="formatCommandline(testData)"> 点我吧 </el-button>
    <div class="w-192px h-200px bg-yellow text-20px" />
    <div>{{ lineString }}</div>
    <div class="base">base</div>
  </section>
</template>
<script lang="ts" setup>
import { ref } from "vue"
const testData = ref(["123", "1absd", "steirng"])
const lineString = ref("")

const formatCommandline = (command: string[] | string) => {
  type lineType = string | number | null
  type ContainerType<T> = { value: T }
  const container: ContainerType<number> = { value: 1 }
  console.log({ container })
  type Readonly<T> = {
    [P in keyof T]: T[P]
  }
  const readonly: Readonly<number> = {
    a: 123,
    b: 123
  }
  console.log(readonly)

  let line: lineType = ""
  if (typeof command === "string") {
    line = command.trim()
  } else {
    line = command.join(",").trim()
  }
  if (lineString.value) {
    lineString.value = ""
  } else {
    lineString.value = line
  }
}
</script>
<style lang="scss" scoped>
.base {
  width: 100px;
  height: 100px;
  display: inline-block;
  background-color: #0ea9ff;
  border-width: 5px;
  border-style: solid;
  border-color: #5daf34;
  transition-property: width, height, background-color, border-width;
  transition-duration: 2s;
  transition-timing-function: ease-in;
  transition-delay: 500ms;
}
.base:hover {
  transform: scale(0.8, 1.5) rotate(35deg) skew(5deg) translate(15px, 25px);
}
</style>
